<template>
		<!-- 添加问卷 -->
        <div>
			<div class="content-top">
				活动管理_添加问卷
			</div>
			<div>
                <div class="edit-content">
					<div class="edit-item">
							<label>问卷标题：</label>
							<input type="text" v-model="questionnaireName" placeholder="请输入问卷标题">
					</div>
					<div class="question-list" v-for="(item,idx) in questionList" :key="idx">
						<div class="question-text">
							{{idx+1}}、{{item.name}}
						</div>
						<div class="question-options">
							<el-radio-group v-if="item.type == 0">
								<el-radio disabled v-for="(val,idx) in item.questionnaireOptionDtos" :key="idx" :label="val.name">{{val.name}}</el-radio>
							</el-radio-group>
							<el-checkbox-group v-if="item.type == 1">
								<el-checkbox disabled v-for="(val,idx) in item.questionnaireOptionDtos" :key="idx" :label="val.name"></el-checkbox>
							</el-checkbox-group>
							<div v-if="item.type == 2">
								<textarea name="" disabled id="" style="width:100%" rows="10"></textarea>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<div class="car-title center-button">
				<center>
					<el-button type="primary" @click="is_add = true">添加问题</el-button>
					<el-button type="primary" @click="onCheck">提交</el-button>
					<el-button type="primary" @click="cancel">返回</el-button>
				</center>
			</div>
			<template v-if="is_add">
				<div class="all-screen"></div>
				<div class='add-box'>
					<div class="edit-top">
						添加问题信息
						<i class="el-icon-close" @click='close_add'></i>
					</div>
					<div class="edit-content">
                       <div class="edit-item" style="display:flex">
							<label>问题内容：</label>
							<textarea name="" id="" v-model="questionText" rows="4"></textarea>
						</div>
						<div class="edit-item">
							<label for="">问题类型：</label>
							<el-select v-model="questionType" placeholder="请选择">
								<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="edit-item">
							<label for="">是否必填：</label>
							<el-radio-group v-model="radio">
								<el-radio :label="0">是</el-radio>
								<el-radio :label="1">否</el-radio>
							</el-radio-group>
						</div>
						<div class="edit-item" v-if="questionType != 2">
							<label for="">选项：</label>
							<el-tag
							:key="tag"
							v-for="tag in dynamicTags"
							closable
							:disable-transitions="false"
							@close="handleClose(tag)">
							{{tag}}
							</el-tag>
							<el-input
							class="input-new-tag"
							v-if="inputVisible"
							v-model="inputValue"
							ref="saveTagInput"
							size="small"
							@blur="handleInputConfirm"
							>
							</el-input>
							<el-button v-else class="button-new-tag" size="small" @click="showInput">添加选项</el-button>
						</div>
					</div>
					<div class="edit-bottom">
						<span @click='close_add'>取消</span>
						<el-button type="primary" @click="onSave">保存</el-button>
					</div>
				</div>
			</template>
		</div>
		
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
                page:1,
                limit:10,
				total:1,
				is_add:false,
				options:[
					{label:'单选题',value:0},
					{label:'多选题',value:1},
					{label:'文本框',value:2}
				],
				radio:0,
				radio1:-1,
				questionType:0,
				questionText:'',
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				checkList: [],
				questionList:[],
				questionnaireName:''
			}
		},
		mounted() {
			this.get_question()
		},
		methods: {
			onSave(){
				if(this.questionText == ''){
				   this.$popup.open('题目内容不能为空')
				   return;
				}
				if(this.questionType != 2 && this.dynamicTags == ''){
					this.$popup.open('选项不能为空')
					return;
				}
				var temp = []
				for(let i=0;i<this.dynamicTags.length;i++){
					 var name = this.dynamicTags[i]
					 var value = i
					 var questionnaireOptionDtos = {
                        'name':name,
						'value':value,
						
					 }
					 temp.push(questionnaireOptionDtos)
				}
				 this.questionList.push({
						'isRequired':this.raido,
						'name':this.questionText,
						'questionnaireOptionDtos':temp,
						'type':this.questionType
				 })
				this.is_add =  false
				this.questionText = '',
				this.dynamicTags = []
			},
			onCheck(){
				var self = this
				if(self.questionnaireName ==''){
					  this.$popup.open('问卷标题不能为空')
					  return;
				}
				if(self.questionList ==''){
					  this.$popup.open('请添加问卷题目')
					  return;
				}
				 this.$axios.post(this.$global.serverIp + 'frontend/questionnaire/saveOrUpdate',{
					   'name':self.questionnaireName,
					   'questionnaireIssueDtos':self.questionList
				 }).then(res =>{
                        if(res != ''){
							this.$popup.open('添加成功')
							this.$emit('questionnaire',res.data.id)
						}
				 })
			},
			close_add(){
				this.is_add = false
				this.questionType = 0
				this.questionText = '',
				this.dynamicTags = []
			},
            cancel(){
                this.$emit('questionnaire',1)
            },
            /* 获取问卷 */
            get_question(){
                this.$axios.post(this.$global.serverIp + 'frontend/questionnaire/findPage',{
                     "page":self.page,
                     "limit":self.limit
                }).then(res =>{

                })
			},
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
				   this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				for(let item of this.dynamicTags){
                   if(item == inputValue){
						this.$popup.open('选项重复，请重新输入')
						return;
				   }
				}
				if(inputValue){
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			
			
			
		},

	}
	import '@/assets/css/common.css'
</script>
<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .edit-content{
	  margin: 0 auto;
  }
  .question-list{
	  margin: 30px 0;
	  width: 500px;
  }
  .question-text{
	  margin-bottom: 20px;
  }
  .el-checkbox-group{
	  margin-left: 0;
  }
</style>
